<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="合同详情" showBack />
    </template>
    <div class="cantainer">
      <!-- 顶部作者 -->
      <div>
        <div :style="'width:' + (paper.a4.width+250) + 'px'" class="heard">
          <div class="status" :style="
              'color:' +
              contractStatus.find(
                ({ value }) => value === userData.contractStatus
              )?.color
            ">
            <!-- .{{
              contractStatus.find(
                ({ value }) => value === userData.contractStatus
              )?.text
            }} -->
            合同详情
          </div>
          <div class="text">
            <a-avatar>{{ userData.name }}</a-avatar>
            <div class="name">
              <div>{{ userData.name }}</div>
              <div v-if="userData.contractStatus === 5">
                退回原因{{ contractData.returnReason }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情内容 -->
    <div class="cantainer" >
      <div class="bodyBox" :style="'width:' + (paper.a4.width+250) + 'px'">
        <!-- 左侧 -->
        <div class="left" :style="'height:' + (paper.a4.height - 40) + 'px'">
          <div class="title">合同与附件</div>
          <div class="left-body">
            <a-button v-for="(item,index) in menuList" :key="item.index" size="mini" :status="item.show ? 'success' : 'normal'" class="butss" shape="round" @click="clickMenuTabs(item,index)">
              {{ item.name }}
            </a-button>
          </div>
        </div>
        <!-- 图片内容 -->
        <FilePreview ref="previewFileRef" :style="
          'width:' +
          (paper.a4.width - 30) +
          'px;padding:20px;min-height:' +
          (paper.a4.height - 40) +
          'px'
        " class="body" v-if="fileShow" :file="fileMessage">
        </FilePreview>
        <!-- 文本内容 -->
        <div :style="
            'width:' +
            (paper.a4.width - 30) +
            'px;padding:20px;min-height:' +
            (paper.a4.height - 40) +
            'px'
          " class="body" v-else v-html="htmlStrList[showIndex]" />
      </div>
    </div>
    <!-- 底部 -->
    <footer>
      <a-space>
        <a-button class="btn" type="secondary" @click="router.back()">
          返回
        </a-button>
        <!-- <a-button class="btn" type="primary">
          提交合同
        </a-button> -->
        <!-- <a-button class="btn" type="primary" status="danger" v-if="contractData.status === 2" @click="refusalReturn">
          拒绝退回
        </a-button> -->
      </a-space>
    </footer>
  </ContentCard>
</template>

<script lang="tsx" setup>
import {
  GetUserContractByStatusDetail,
  SwitchDraftWaitSignedContract,
  DraftWaitSignedContractSavePutStatus,
  EditContractStatus
} from '@/apis/management/contract/contractManagement/waitSigned';
import { paper } from '@/utils/printAndPdf';
import {
  contractStatus,
  contractStatusToUserStatus
} from '@/utils/dictionary/contract';
import { Message } from '@arco-design/web-vue';
import FilePreview from './FilePreview.vue';
import { reactive } from 'vue';


let router = useRouter();
const route: any = useRoute();

const userId = +route.query.contractId;

let userData = reactive<any>({});
let contractData = reactive<any>({});
let htmlStrList = ref<any[]>([]);
let showIndex = ref(0);
// 左侧菜单
const menuList = ref([]);
// 本地合同
const fileShow = ref(false);
// 本地合同数据
const fileMessage = reactive<any>({
   id: '',
   fileName: '',
   downloadUrl: ''
})
// 查看 
let loadData = async () => {
  try {
    let data = JSON.parse(localStorage.getItem('contractDetailsData') + '');
    console.log( data.contractStatus);
    
    Object.assign(userData, data);
    let status =
      contractStatusToUserStatus.find(
        ({ value }) => value === data.contractStatus
      )?.status || 0;
      console.log('状态',status);
      
    let res = await GetUserContractByStatusDetail({
      userId: data.id as number,
      // status: status
    });
    if (!res[0]) return;
    Object.assign(contractData, res[0]);
    // contractData.children.push(contractData.children[0])
    // 正常合同回显
    htmlStrList.value = [];
    // 添加文件浏览内容
    if (contractData.uploadContract.fileUrl) {
      fileMessage.id = contractData.uploadContract.id;
      fileMessage.fileName = contractData.uploadContract.fileName;
      fileMessage.downloadUrl = contractData.uploadContract.fileUrl;
      menuList.value.push({
        name:contractData.uploadContract.fileName,
        index:0,
        show:true
      })
      fileShow.value  = true;
    }
      htmlStrList.value =
      (await Promise.all(
        res[0].children?.map((item: any,index:number) => {
            menuList.value.push({
              name:item.name,
              index:index+1,
              show:false
            })
            return SwitchDraftWaitSignedContract({
            id: res[0].userId,
            text: item.text,
            codes: item.codes
          });
        })
      )) || [];
  } catch (err) {
    console.log(err);
  }
};
// 切换
const clickMenuTabs = (row:any,index:number) =>{
  menuList.value.map((item)=>{
        if (item.index===index) {
          item.show = true;
        }else{
          item.show = false;
        }
        return item;
  })

  if (row.index == 0) {
    fileShow.value=true;
  }else{
    fileShow.value=false;
    showIndex.value = row.index-1;
  }
}
loadData();
</script>
<style lang="less" scoped>
.bodyBox {
  word-wrap: break-word;
  margin: 20px;
  margin-bottom: 70px;
  display: flex;
  justify-content: center;

  .left {
    margin-right: 20px;
    width: 195px;
    overflow: hidden;
    .title {
      font-weight: 600;
      font-size: 16px;
    }

    &-body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    border: 1px solid var(--color-neutral-4);
    padding: 20px;
  }
  .butss {
    margin: 5px;
  }
  .body {
    word-wrap: break-word;
    margin-bottom: 70px;
    box-shadow: 0px 0px 5px var(--color-neutral-6);
    // transform: scale(1.4);
  }
}
.cantainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  .heard {
    height: 100px;
    // transform: scale(1.4);
    border: 0.5px solid var(--color-neutral-5);
    .status {
      border-bottom: 0.5px solid var(--color-neutral-5);
      line-height: 26px;
      padding-left: 20px;
      background: rgb(var(--arcoblue-1));
    }
    .text {
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;
      height: 70px;
      align-items: center;
      .name {
        margin-left: 20px;
        line-height: 22px;
      }
    }
  }
}

footer {
  height: 100px;
  padding-top: 15px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
</style>
